<template>
  <el-container>
    <el-aside class="contain_aside">
      <ul class="menus">
        <li 
          v-for="(menu,index) in menus" 
          :key="index" 
          :class="{active: $route.path.indexOf(menu.href) !== -1}"
          @click=toPage(menu.href)>
          {{menu.name}}
        </li>
      </ul>
    </el-aside>
    <el-main class="contain_main">
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
import { remove_local_storage, remove_session_storage } from "@/utils/storage"
export default {
  data() {
    return {
      menus:[
        {name: "文章管理", href: "/dashboard/article"},
        {name: "分类管理", href: "/dashboard/category"},
        {name: "前台", href: "admin"},
        {name: "退出", href: "logout"},
      ],
    }
  },
  methods: {
    toPage(href) {
      if (href === "logout") {
        this.$router.push("/login");
        remove_local_storage("token")
        remove_session_storage("token")
        this.$store.commit('user/REMOVE_TOKEN')
      }else if (href === "admin") {
        this.$router.push("/");
      } else {
        this.$router.push(href);
      }
    }
  },
  computed: {
  }
}
</script>

<style lang="scss" scoped>

@media screen and (min-width: 600px) {
 .contain_aside{
  border-right: 2px solid #ccc;
  width: 150px !important;
  height: 100vh;
  padding:20px;
  position: fixed;
  overflow: auto;
  float: left;
  li {
    cursor: pointer;
    height: 55px;
    line-height: 55px;
    font-style: 16px;
    &:hover{
      color: #fd760e
    }
    &.active {
      color: #fd760e
    }
  }
}
.contain_main {
  margin-left: 150px;
  padding-left: 80px;
}
}

@media screen and (max-width: 600px) {
  .el-container {
    flex-direction: column;
  }
 .contain_aside{
  width: 100vw !important;
  padding:20px;
  padding-bottom: 0;
  .menus {
    width: 100%;
    display: flex;
    justify-content:space-around;
  }
  li {
    cursor: pointer;
    height: 55px;
    line-height: 55px;
    font-style: 16px;
    &:hover{
      color: #fd760e
    }
    &.active {
      color: #fd760e
    }
  }
}
}


</style>